<template>
	<div>
		<p class="tabs-p" >共享试题是由各管理员创建并通过 <b>题库共享</b>  ，提供给所有管理员使用的试题 ，您可以使用这些试题创建试卷、组织考试</p>
		<div class="handle-box">
			<el-input class="handle-input" v-model="headerData.keyWord" placeholder="关键字"/>
			<el-select
			  v-model="headerData.status" 
				filterable
				allow-create
                placeholder="状态" 
                style="width: 80px; margin-right: 8px;"
			   >
				<el-option
					v-for="item in options.statuses"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
			<el-input class="handle-input" v-model="headerData.founder" placeholder="创建人"/>
				<el-button color="#1c84c6" class="handle-btn" :icon="Search" @click="handleSearch"></el-button>
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
                size="small"
                border
				@selection-change="handleSelectionChange">
				<el-table-column   type="selection" width="40" />
                <el-table-column  prop="question_bank" label="题库"  align="center" >
				</el-table-column>
				<el-table-column prop="type" label="类型" align="center"  ></el-table-column>
                <el-table-column label="状态" align="center"  >
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row.status"
                                :active-value="'正常'"
                                :inactive-value="'禁用'"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"
                                
                                @change="changeSwitch(scope.row.status)"/>
					</template>
                </el-table-column>
                <el-table-column prop="difficulty" label="难度" align="center"  ></el-table-column>
                <el-table-column prop="question_stem" label="题干" align="center"></el-table-column>
                <el-table-column label="最后修改时间" align="center"  >
					<template #default="scope">
					<p>{{  scope.row.founder }}</p>	
					<p style="color:#888888; font-weight: 100;">{{ scope.row.change_modified }}</p>
					</template>
				
				</el-table-column>
				<el-table-column label="操作" width="180" align="center" >
					<template #default="scope">
						<el-row class="right-btn">
						    <el-button   @click="previewDialog(scope.row)">
                                <i class="iconfont icon-eye4 "></i>共享预览</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:small="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>
		 <!-- 试题预览的弹框 -->
		 <el-dialog title="试题预览" v-model="previewDialogVisible" width="30%">
			<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">试题预览</h4> 
			</div>
			</template>
			<TestSub v-model:showData="showData"></TestSub>
		<el-divider></el-divider>
		</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getTestQuestions} from '../../../api/exam' ;
import TestSub from './TestSub.vue';
const userName = localStorage.getItem('ms_username')
//关键字
const headerData=reactive({
	keyWord:'',
	status:'',
	founder:''
})
const options = reactive({
statuses:[
	{
		value: '状态',
		label: '状态',
 	 },
  {
    value: '正常',
    label: '正常',
  },
  {
    value: '禁用',
    label: '禁用',
  },
  ],
  
}
)
	
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')


//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getTestQuestions({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //调用后台修改接口
    console.log(status,'>>>status');
}

// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};
//删除多个数据  to......
const handleAllDelete =()=>{
	// console.log('删除多个')
	console.log(state.multipleSelection,'===拿到所有选择的数据====')
	if (state.multipleSelection.length==0) {
		ElMessage.error('请选择项')
		return
  	}
	// console.log(state.multipleSelection.map(item=>item.id))
	//axios删除的操作
	// deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})

	
}


// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};



// 点击修改
const emit  = defineEmits(['sendRowData'])
const open  = (index,row)=>{//index是时间源对象
	// 二次确认删除
	ElMessageBox.confirm('修改讲操作无法恢复,请谨慎操作！', '你正在修改由他人创建的题库?', {
	   	confirmButtonText: '知道了',
      	cancelButtonText: '取消',
		type: 'warning'
	})
	.then(() => {
		emit('sendRowData',row)
	})
	.catch(() => {});
	
}
/**----------------试题预览 ---------------*/
//弹出框框的显示 
const previewDialogVisible = ref(false)
//数据展示
const showData = reactive({
	question_bank: '',
    type: '',
    status: '',
    label: [],
    difficulty: '',
    question_stem: '',
    founder: '',
    modified_by: '',
    creation_time: '',
    change_modified: '',
    option_settings: '',
    source_test: '',
    test_answer: '',
    answer_analysis: ''
})
const previewDialog = (row)=>{
    showData.question_bank= row.question_bank
    showData.question_stem= row.question_stem
	showData.type= row.type
	showData.status= row.status
	showData.label=row.label
	showData.difficulty=row.difficulty
	showData.founder=row.founder
	showData.modified_by=row.modified_by
	showData.option_settings=row.option_settings
	showData.test_answer=row.test_answer
	showData.answer_analysis=row.answer_analysis
	previewDialogVisible.value=true

}

</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
	.handle-btn{
		margin-left: 10px;
	}
}

.el-select {
	width: 200px;
	// margin-right: 10px;  
}
.handle-input {
	width: 200px;
    margin-right: 10px;
}

.top-btn{
	float: right;
	.el-button{
		margin-left: 5px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}

.tabs-p{
  margin: 0px 0px 20px;
  color: #AAAAAA;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px  solid #f0f0f0;
}
</style>